<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>MOIM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="resources/jquery-1.8.3.min.js"></script>
<script src="resources/jquery.mobile-1.3.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="resources/style.css" />
</head>
<body>

<div data-role="page" id="indexpage">
</div>

	<script type="text/javascript">
		var db;
		var findUrl = "";
		var contentValue = "";
		
		//indexpage redirection
		$("#indexpage").live("pagecreate",function(){
	         $.mobile.changePage("/Web Content/oneplusone/views/login.jsp");
		});
		
		function dbinit() {
			db = window.openDatabase("moim_db", "1.0", "Just a C4 DB", 200000); //will create database Dummy_DB or open it
		}

		//create table and insert some record
		function setupTable(tx) {
			console.log("setupTable start");
			tx.executeSql("CREATE TABLE IF NOT EXISTS MOIM_BOARD (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, content TEXT NOT NULL, regdate TEXT NOT NULL)");
			console.log("setupTable end");
		}

		//function will be called when an error occurred
		function dbErrorHandler(err) {
			alert("Error processing SQL: " + err.code);
			console.log("Error processing SQL " + err.code);
		}

		//function will be called when process succeed
		function showBoard() {
			db.transaction(queryDB, dbErrorHandler);
		}

		//select all from SoccerPlayer
		function queryDB(tx) {
			console.log("queryDB!!!!!");
			tx.executeSql('SELECT * FROM MOIM_BOARD', [], renderList,
					dbErrorHandler);
		}

		function renderList(tx, result) {
			console.log("result : " + result);
			$.each(result.rows, function(index) {
				var row = result.rows.item(index);
				console.log(row.id + "," + row.scancode + "," + row.title + "," + row.content);
				$("#board-list").append(
						"<li data-role=\"collapsible\"  data-icon='arrow-d' data-iconpos='right' data-theme='z' data-content-theme='d'>" +
						"<h4><img src='img/profile-sample.jpg' alt='profile'>&nbsp;" + row.title +
						"<span class='date'>" + row.regdate + "</span> </h4>" + 
						"<p>" + row.content + "</p>" + 
						"</li>");
			});
			$("[data-role=\"collapsible\"]").collapsible();
			$("#ajax").show();
		}

		function successCB() {

		}

		
		 function onDeviceReady() {
		 //logcat에 로그..
		 console.log("onDeviceReady");
		 // 10초간 SplashScreen이 보여지라고 하였지만, deviceready상태가 되면 무조건 SplashScreen을 닫는다.
		 cordova.exec(null, null, "SplashScreen", "hide", []);
		 // 저장된 정보 확인.
		 //getEntries(); 
		 }    
		 
		$(function() {
			//document.addEventListener("deviceready", onDeviceReady, false);
			console.log("document ready");

			// db준비
			dbinit();
			// device가 준비되면 table을 준비한다.
			db.transaction(setupTable, dbErrorHandler, successCB);

			//perform board-write
			$("#writebutton").click(function() {

				console.log("write submit button clicked");
		        $.ajax({
		            url : "http://edu.sunnyvale.co.kr/C4Db/api/1.0/list.json",
		            dataType : "jsonp",
		            jsonp : "callback",
		            success : function(jsonData){

						db.transaction(function(tx){
		            		tx.executeSql('delete from MOIM_BOARD');
		            	}, dbErrorHandler, successCB);
						
						$.each(jsonData.list, function(k, v) {
							
							db.transaction(function(tx) {
								tx.executeSql('INSERT INTO MOIM_BOARD (title, content, regdate) VALUES(?,?,?)',
										[v.title, v.url, v.createDate]);
							},dbErrorHandler, successCB); 
						});
		            }
					
				}); //getJSON

				console.log("done insertion");
			}); //write_submit_btn
			
			//page가 열릴때..
			$("[data-role=page]").live("pageshow", function(event) {
				console.log("pageId :" + this.id);
				if (this.id == "board") {
					// history내용을 읽어와서 화면에 출력한다.
					showBoard();
				}

			}); // pageshow		        

		}); // document.ready
	</script>

</body>
</html>